<script setup>
import {ref,onMounted} from 'vue'
import {getbusinessList , getBusinessStatus ,allocationBusinessList ,getDepartment ,getHighseasList,fishForBusiness,getPersonnel} from '@/api/business'
import AddBusiness from './componets/add-business.vue'
import { ElMessage  } from 'element-plus'


// 弹层开关变量
const dialogVisible = ref(false)
const Visible = ref(false)

// 定义params对象
const paramsForm = ref({
    phone: "",
    name: "",
    belonger: "",
    status: null,
    minDateTime: "",
    maxDateTime: "",
    id: null,
    page:1,
    size:10,
    total: 0
})

const paramsData = ref({
  phone: "",
    name: "",
    belonger: "",
    status: "伪商机",
    minDateTime: "",
    maxDateTime: "",
    id: null,
    page:1,
    size:10,
    total: 0
})

// tab数据列表
const list = ref([])
// 商机状态数组
const businessStatusList = ref([])

// tab 默认页
const activeName = ref('first')

// 生命周期
onMounted(()=>{
    getbusiness()
    getBusinessStatusAPI()
    gteHighseas()
})

// 获取列表数据
const getbusiness = async() => {
    const {data, total} = await getbusinessList(paramsForm.value)
     list.value = data
     console.log();
     paramsForm.value.total = total
}


// 获取商机状态
const getBusinessStatusAPI = async() => {
 const {data} = await getBusinessStatus()
 businessStatusList.value = data
}

// 分页逻辑
  const handleSizeChange  = (val)=> {
        console.log(`每页 ${val} 条`)
        paramsForm.value.size = val
        getbusiness()
      }
  const  handleCurrentChange = (val) =>  {
        console.log(`当前页: ${val}`)
        paramsForm.value.page = val
        getbusiness()
      }

// 定义表单情况变量
const formRef = ref(null)

// 重置按钮
const resetting = () =>{
  formRef.value.resetFields()
  getbusiness()
}

const addBusinessAPI = ref(null)

// 查看按钮
const viewBusiness = (id) =>{
  dialogVisible.value = true
  addBusinessAPI.value.getBusiness(id)
}

// 部门列表
const departmentList = ref([])

// 部门下拉框值改变
const changeValue = (value)=>{
  Personnel(value)
  console.log(value);
}
// 定义部门人员数组
const PersonnelList = ref([])

// 获取部门人员
const Personnel = async(value) =>{
 const {data} =  await getPersonnel(value)
 PersonnelList.value = data
}

// 批量分配
const allocationBusiness = async() => {
  Visible.value = true
  const {data} = await getDepartment()
  departmentList.value = data
}

// 定义分配数据对象
const allocationData = ref({
  businessList:[], // id数组
  department:'',
  employee:''
})

// 定义捞取商机数组
const businessData = ref({
  businessList:[]
})
// 商机捞取弹层开关
const VisibleDialog = ref(false)

  
// 打开捞取商机
const fishForBusinessAPI = async() =>{
  VisibleDialog.value = true
}

// 点击确定 捞取商机
const fishForBusinessOk = async()=>{
  await fishForBusiness(businessData.value)
  await ElMessage.success('捞取成功')
  VisibleDialog.value = false
  gteHighseas()
  getbusiness()
}


// 获取单条数据对象
const idList = ref([])

// 获取id方法
const checkout = (selection)=>{
  idList.value = selection
  businessData.value.businessList = selection
}

allocationData.value.businessList = idList

// 公海池数据列表
 const highseasList = ref([])
// 获取公海池列表
const gteHighseas = async()=>{
  const {data,total} = await getHighseasList (paramsData.value)
  highseasList.value = data
  paramsData.value.total = total
}

// 点击确定 分配商机
const allocationOk = async()=>{
  await allocationBusinessList(allocationData.value)
  await ElMessage.success('分配成功')
  getbusiness()
  gteHighseas()
  Visible.value = false
}

// 声明公海表单名称
const highseasFrom = ref (null)

// 重置
const resettingForm = ()=>{
  highseasFrom.value.resetFields()
  gteHighseas()
}

</script>

<template>
    <div class="business">
        <!-- 头部table切换 -->
        <!-- <div class="business-head">
            <span >商机</span> 
            <span>公海池</span>
        </div> -->
        <el-tabs v-model="activeName" @tab-click="handleClick" style="margin-left: 30px;">
           <el-tab-pane label="商机" name="first">
                 <!-- 搜索框 -->
        <div class="search-box">
           <el-form :model="paramsForm" ref="formRef">
             <el-form-item label="客户ID:" style="margin-top: 5px;" prop="id">
                <el-input v-model="paramsForm.id" placeholder="请输入" style="width: 310px; " ></el-input>
             </el-form-item>
             <el-form-item label="手机号:" style="margin-top: 5px;" prop="phone">
                <el-input v-model="paramsForm.phone" placeholder="请输入" style="width: 310px;"></el-input>
             </el-form-item>
             <el-form-item label="客户姓名:" style="margin-top: 5px;" prop="name">
                <el-input v-model="paramsForm.name" placeholder="请输入" style="width: 310px;"></el-input>
             </el-form-item>
             <el-form-item label="商机归属:" prop="belonger">
               <el-input v-model="paramsForm.belonger" placeholder="请输入" style="width: 310px;"></el-input>
             </el-form-item>
             <el-form-item label="商机状态:" prop="status">
               <el-select v-model="paramsForm.status" placeholder="全部" style="width: 310px;">
                 <el-option v-for=" item in businessStatusList" :key="item.id" :label="item.content" :value="item.content"></el-option>
               </el-select>
             </el-form-item>

             <el-form-item label="创建时间"  prop="createTime">
              <el-date-picker
               type="daterange"
               style="width: 290px;" 
               v-model="paramsForm.createTime" 
               />
               </el-form-item>
            
                <el-form-item style="margin-left: 915px; ">
                  <el-button type="" @click="resetting">重置</el-button>
                  <el-button type="primary" @click="getbusiness">搜索</el-button>
              </el-form-item>
           </el-form>
        </div>
        
        <!-- 新增-->
        <div class="add-business ">
            <el-button type="primary" @click="dialogVisible = true">+ 新建商机</el-button>
            <el-button type="primary" @click="allocationBusiness">+ 批量分配</el-button>
        </div>
        
        <!-- 表格 -->
        <div class="table">
            <el-table  style="width: 100%;" :data="list" @selection-change="checkout">
            <el-table-column type="selection" width="55" > </el-table-column>
              <el-table-column fixed prop="id" label="客户ID" width="200" ></el-table-column>
              <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
              <el-table-column prop="phone" label="手机号" width="150"></el-table-column>
              <el-table-column prop="subjects" label="意向学科" width="100"> </el-table-column>
              <el-table-column prop="belonger" label="归属人" width="100"> </el-table-column>
              <el-table-column prop="createTime" label="创建时间" width="165" sortable > </el-table-column>
              <el-table-column prop="status" label="商机状态" width="120"> </el-table-column>

              <el-table-column fixed="right" label="操作" width="180">
                <template v-slot="{row}">  
                  <el-button  type="text" @click="viewBusiness(row.id)">查看</el-button>
                  <el-button  type="text"  @click="$router.push({path:`/follow/${row.id}`})">跟进</el-button>
                  <el-button  type="text" @click="allocationBusiness">分配</el-button>
                </template>
              </el-table-column>

       </el-table>
        </div>
       

       <!-- 分页 -->
       <div class="paging" >
          <span>已选{{ idList.length }}择项</span> 
          <el-pagination
             @size-change="handleSizeChange"
             @current-change="handleCurrentChange"
             :current-page="paramsForm.page"
             :page-sizes="[10, 20, 30, 40]"
             :page-size="paramsForm.size"
             layout="total, sizes, prev, pager, next, jumper"
             :total="paramsForm.total"
            >
            </el-pagination>
       </div>
         
       <!-- 新增弹层 -->
       <add-business ref="addBusinessAPI" v-model:dialogVisible="dialogVisible"  @addBusiness="getbusiness"></add-business>
       <!-- 分配弹层 -->
       <el-dialog
           title="分配线索"
           v-model="Visible"
           width="30%"
           :before-close="handleClose"
           >
        <span>您选择了<span style=" color: #06ce96;">{{ idList.length }}</span>个线索,请选择人员进行分配:</span>
        <el-form :model="allocationData">
          <el-form-item label="请选择部门" style="   margin-top: 25px;" prop="department">
            <el-select placeholder="请选择" v-model="allocationData.department" @change="changeValue">
               <el-option v-for=" item in departmentList" :key="item.id" label="" :value="item" ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="请选择人员" prop="employee">
            <el-select placeholder="请选择" v-model="allocationData.employee">
               <el-option v-for="item in PersonnelList" :key="item.id" label="" :value="item" ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
       <template #footer>
         <span class="dialog-footer">
           <el-button @click="Visible = false" style="border-radius: 10px;">取 消</el-button>
           <el-button  style="background-color: #0fd09a; color: #ffffff; border-radius: 10px;" @click="allocationOk">确 定</el-button>
         </span>
       </template>
    </el-dialog>

           </el-tab-pane>
           
           <el-tab-pane label="公海池" name="second" >
             <el-form
               label-position="top"
               label-width="100px"
               style="width: 100%;margin: 20px 60px;"
               :inline = true
               :model="paramsData"
               ref="highseasFrom"
               >
              <el-form-item label="客户名称" style="margin-left:-60px;" prop="name">
              <el-input  style="width: 260px;" placeholder="请输入" v-model="paramsData.name"/>
              </el-form-item>
              <el-form-item label="手机号" prop="phone">
              <el-input  style="width: 260px;" placeholder="请输入" v-model="paramsData.phone"/>
              </el-form-item>
              <el-form-item label="客户ID" prop="id">
              <el-input  style="width: 260px;" placeholder="请输入" v-model="paramsData.id"/>
              </el-form-item>
              <el-form-item label="意向学科" prop="subject">
              <el-select  style="width: 260px;" placeholder="请输入" v-model="paramsData.subject"/>
              </el-form-item>
              <el-form-item label="创建时间" style="margin-left:-60px;" prop="createTime">
              <el-date-picker
               type="daterange"
               style="width: 230px;" 
               v-model="paramsData.createTime"
               />
               </el-form-item>
               <el-form-item class="btn" style="margin-left:663px; margin-top: 30px;">
               <el-button size="large" style="width: 90px;" type="primary" round @click="gteHighseas">搜索</el-button>
               <el-button size="large" style="width: 90px;" round @click="resettingForm">重置</el-button>
               </el-form-item>
             </el-form>
             <el-row class="formbox">
                 <el-col style="margin-bottom: 20px;">
                     <el-button type="primary" round style="width: 120px; height: 40px;" @click="fishForBusinessAPI">批量捞取</el-button>
                     <el-button type="primary" round style="width: 120px; height: 40px;" @click="allocationBusiness">批量分配</el-button>
                 </el-col>
                 <el-col>
                 <el-table
                      style="width: 100%"
                      :data="highseasList"
                      @selection-change="checkout"
                      >
                     <el-table-column type="selection" width="55"  />
                     <el-table-column label="客户ID" width="220" prop="id"/>
                     <el-table-column label="姓名" show-overflow-tooltip prop="name"/>
                     <el-table-column  label="手机号" show-overflow-tooltip prop="phone"/>
                     <el-table-column  label="意向学科" show-overflow-tooltip prop="subjects"/>
                     <el-table-column  label="创建时间" show-overflow-tooltip prop="createTime"/>
                     <el-table-column  label="操作" show-overflow-tooltip > 
                      <!-- <template >    -->
                        <el-button  type="text" style="color: #02860f;"  @click="fishForBusinessAPI">捞取</el-button>
                        <el-button  type="text" style="color: #02860f; height: " @click="allocationBusiness">分配</el-button>
                      <!-- </template> -->
                     </el-table-column>
                </el-table>
                <el-row justify="space-between" style="background-color: #fff;padding: 20px 10px;">
                   <span>已选择{{ idList.length }}项</span>
                   <el-pagination
                   @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="paramsData.page"
                  :page-sizes="[10, 20, 30, 40]"
                  :page-size="paramsData.size"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="paramsData.total"
                      />
                </el-row>
                </el-col>
                 </el-row>
             </el-tab-pane>

               <!-- 分配弹层 -->
       <el-dialog
           title="分配线索"
           v-model="Visible"
           width="30%"
           :before-close="handleClose"
           >
        <span>您选择了<span style=" color: #06ce96;">{{ idList.length }}</span>个线索,请选择人员进行分配:</span>
        <el-form :model="allocationData">
          <el-form-item label="请选择部门" style="   margin-top: 25px;" prop="department">
            <el-select placeholder="请选择" v-model="allocationData.department" @change="changeValue">
               <el-option v-for=" item in departmentList" :key="item.id" label="" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="请选择人员" prop="employee">
            <el-select placeholder="请选择" v-model="allocationData.employee">
               <el-option v-for="item in PersonnelList" :key="item.id" label="" :value="item" ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
       <template #footer>
         <span class="dialog-footer">
           <el-button @click="Visible = false" style="border-radius: 10px;">取 消</el-button>
           <el-button  style="background-color: #0fd09a; color: #ffffff; border-radius: 10px;" @click="allocationOk">确 定</el-button>
         </span>
       </template>
    </el-dialog>

    <!-- 商机捞取弹层 -->
    <el-dialog title=""
           v-model="VisibleDialog"
           width="20%">
       <p style="margin-left: 80px;">您已选择{{ idList.length }}个商机</p>
       <p style="margin-left: 100px;">确认捞取?</p>
       <template #footer>
           <el-button @click="VisibleDialog = false" style="border-radius: 10px;">取 消</el-button>
           <el-button  style="background-color: #0fd09a; color: #ffffff; border-radius: 10px; margin-right: 60px;" @click="fishForBusinessOk">确 定</el-button>
       </template>
    </el-dialog>
       </el-tabs>
        
    </div>
</template>

<style lang="less" scoped>
   .business {
    border-radius: 10px;
    width: 1230px;
    background-color: #fff;
    

    .business-head {
        margin-left: 15px;
         width: 1200px;
        line-height: 50px;
        height: 50px;
        border-bottom: 1px solid #bcbcbc;
        font-size: 16px;

       span {
        display: inline-block;
        text-align: center;
         width: 140px;
       }
    }


    .search-box {
       margin-left: 15px;
       width: 1198px;
       height: 230px;
       margin-left: -30px;
      //  border: 1px solid #cccccc;
      //  border-top: 1px solid #ffffff;

       .el-form {
        display: flex;
        flex-wrap: wrap;
       

       .el-form-item{
        display: inline-block;
        margin-left: 45px;
        margin-right: 30px;
       }

       .el-button {
        width: 100px;
        height: 40px;
       
       }
    }
    }

    .add-business {
        display: flex;
        justify-content: space-between;
        padding: 0px 50px 0px 15px;
        height: 80px;

        .el-button {
            margin-top: 20px;
            display: inline-block;
            width: 130px;
            height: 40px;
        }
    }

    .table {
        .el-button {
        width: 30px;
       }
    }

    .paging{
        padding-right: 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20px;
        margin-left: 30px;
    }
   }

   
</style>
